<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01 - 加载腾讯地图</title>
    <script src="../lib/ol6.4.3/ol.js"></script>
    <script src="../lib/proj4/proj4.js"></script>
    <link rel="stylesheet" href="../css/ol6.4.3/ol.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            width: 100%;
            height: 100%;
        }

        #map {
            width: auto;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="map"></div>
</body>
<script>
    /*const projection = new ol.proj.Projection({
        code: 'EPSG:4490',
        // extent: [73.62, 16.7, 134.77, 53.56],
        extent: [-180, -90, 180, 90],
        units: 'degress',
        axisOrientation: 'neu'
    });
    proj4.defs('EPSG:4490', '+proj=longlat +ellps=GRS80 +no_defs');
    ol.proj.addProjection(projection);
    ol.proj.addCoordinateTransforms('EPSG:4326', 'EPSG:4490', coordinate => {
        return proj4('EPSG:4326', 'EPSG:4490', coordinate);
    }, coordinate => {
        return proj4('EPSG:4490', 'EPSG:4326', coordinate);
    });*/
    const projection = ol.proj.get('EPSG:4326');
    const tileSize = 256;
    const projectionExtent = projection.getExtent();
    const size = ol.extent.getWidth(projectionExtent) / tileSize;
    const resolutions = [];
    for (let z = 0; z < 22; ++z) {
        resolutions[z] = size / Math.pow(2, z);
    }
    console.log(resolutions);
    const tileGrid = new ol.tilegrid.TileGrid({
        origin: [0, 0],
        resolutions: resolutions,
        extent: projectionExtent
    });

    const tileImageSource = new ol.source.TileImage({
        projection: projection,
        tileGrid: tileGrid,
        tileUrlFunction: (tileCoord, pixelRatio, proj) => {
            let [z, x, y] = tileCoord;
            const newY = Math.pow(2, z) - 1 - y;
            return `https://gisxyz.yzyby2018.com/tile?z=${z}&x=${x}&y=${newY}`;
        }
    });
    // 百度地图层
    const baiduMapLayer = new ol.layer.Tile({
        source: tileImageSource
    });

    // const circlePoint = ol.proj.transform([116.384722, 39.889916], 'EPSG:4326', 'EPSG:4490');
    const circlePoint = [116.384722, 39.889916];
    console.log(circlePoint);

    const source = new ol.source.Vector({
        wrapX: false,
        feature: new ol.Feature({
            geometry: new ol.geom.Circle(circlePoint, 100000)
        })
    });

    const vector = new ol.layer.Vector({
        source: source,
        style: new ol.style.Style({
            fill: new ol.style.Fill({
                color: 'rgba(255, 0, 0,1)'
            }),
            stroke: new ol.style.Stroke({
                color: '#ffcc33',
                width: 20
            })
        })
    });


    const map = new ol.Map({
        layers: [
            baiduMapLayer,
            vector
        ],
        target: 'map',
        view: new ol.View({
            // center: ol.proj.transform([116.384722, 39.889916], 'EPSG:4326', 'EPSG:4490'),
            center: [119.204117,32.276382],
            projection,
            zoom: 5,
            maxZoom: 10,
            minZoom: 1
        })
    });
</script>
</html>